/*

*/
* {
    box-sizing: border-box;
}

body {
    /*
        字体回退机制
      这个声明采用了‌字体回退机制‌，浏览器会从左到右依次尝试使用指定的字体
      首先尝试使用Verdana字体，如果用户的设备上没有安装Verdana，则会使用系统默认的无衬线字体（sans-serif）来显示文本
        字体类型说明
      Verdana‌：     是一种专门为屏幕显示设计的无衬线英文字体，在小字号下仍能保持清晰可读
      sans-serif‌：  是‌无衬线字体族‌的统称，这类字体笔画简洁，没有额外的装饰线条，更适合在屏幕上阅读
    */
    font-family: Verdana, sans-serif;
}

.myslides {
    /*
        none:被隐藏了
    */
    display: none;
}

.slideshow-container {
    /*
        与 width 的区别‌
            width：      固定宽度，元素始终保持该宽度
            max-width：  最大宽度限制，元素可以更窄但不能更宽
    */
    max-width: 1000px;
    position: relative;
    /*
        在CSS中，margin: auto 的上下边距值通常为 0
        当使用 margin: auto 时，浏览器会计算并分配外边距，但在垂直方向上 auto 通常不起作用，相当于 0
        margin: auto 时，浏览器会自动计算并使其左右外边距相等，从而实现水平居中(就是距离左边距和右边距相当)
    */
    margin: auto;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    /*
        下面就是让浏览器自动计算宽度
    */
    width: auto;
    /*
        margin-top: -22px 表示将元素的上外边距设置为负 22 像素，这会使该元素向上移动 22 像素
    */
    margin-top: -22px;
    padding: 16px;
    color: white;
    /*
        字体是粗体
    */
    font-weight: bold;
    /*
        transition: 0.6s ease; 是 CSS 过渡属性的简写形式，用于在元素状态改变时（如鼠标悬停）创建平滑的动画效果
            0.6s‌：表示过渡动画的持续时间为 0.6 秒
            ease‌：表示动画的速度曲线，即动画以慢速开始、然后变快、最后以慢速结束
         这个简写属性省略了两个可选参数：
               过渡属性‌：未指定具体属性，默认值为 all，表示所有支持过渡的 CSS 属性都会应用这个动画效果
               延迟时间‌：未指定延迟，默认值为 0s，表示动画立即开始

        完整的语法格式应该是：transition: [property] [duration] [timing-function] [delay]
            因此 transition: 0.6s ease; 等同于：

        css
            transition-property: all;
            transition-duration: 0.6s;
            transition-timing-function: ease;
            transition-delay: 0s;
    */
    transition: 0.6s ease;
    /*
        border-radius: 0 3px 3px 0; 是CSS中用于设置元素圆角边框的属性，
        它按照‌左上角、右上角、右下角、左下角‌的顺序分别指定四个角的圆角半径(相当于是顺时针)
            具体到这个值：
        ‌左上角‌：0（直角，无圆角效果）
        右上角‌：3px（3像素的圆角）
        ‌右下角‌：3px（3像素的圆角）
        左下角‌：0（直角，无圆角效果）
    */
    border-radius: 0 3px 3px 0;
}

.next {
    right: 0;
    /*

    */
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.text {
    color: #f2f2f2;
    font-size: 15px;
    /*
        表示上下8px,左右16px
    */
    padding: 8px 16px;
    position: absolute;
    bottom: 8px;
    /*
        下面的宽度与父元素也有关系
    */
    width: 100%;
    text-align: center;
}

.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0px;
}

.dot {
    cursor: pointer;
    height: 13px;
    width: 13px;
    /*
        这个值的具体含义是：
        上下外边距‌：0（上下方向没有外边距）
        左右外边距‌：2px（左右方向各有2像素的外边距）
        这种写法相当于：
            margin-top:     0;
            margin-right:   2px;
            margin-bottom:  0;
            margin-left:    2px;
    */
    margin: 0 2px;
    background-color: #bbb;
    /*
        这里表示4个脚都是
    */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

.fade {
    /* 指定动画名称 */
    animation-name: fade;
    /* 设置动画时长 */
    animation-duration: 1.5s;
}

@keyframes fade {
    /*
        开始时
    */
    from {
        opacity: 0.4
    }
    /*
        结束时
    */
    to {
        opacity: 1.0
    }
}

/*
    box-sizing 属性 这个属性决定了如何计算元素的总宽度和总高度
    它有两个主要的值:
    1. content-box (默认值)
       宽度和高度只包含内容区域(就宽度而言就是下面的 width)
       增加内边距(padding)和边框(border)会增加元素的总尺寸
       公式: 总宽度=width + Padding-Left + Padding-Right + Border-Left + Border-Right

    2.border-box
       宽度和高度包含内容，内边距和边框
       增加内边距(padding)和边框(border)不会增加元素的总尺寸，而是压缩内容区域
       公式: 总宽度=width( 内容+ Padding-Left + Padding-Right + Border-Left + Border-Right )
*/

/*
    基础样式重置
        *{} 在CSS里面是通用选择器，用于选中页面中的所有HTML元素
        常用于CSS重置，统一浏览器默认样式
 */

/*
    将元素设为flex弹性布局容器，内部子元素成为flex项目

    css的display属性用于控制HTML元素在页面上的布局方式，决定元素如何生成和排列其内容
      其主要属性值及作用：
        block:(块级元素)
            元素独占一行，宽度默认填满父容器
            可以设置宽度，高度，内外边距
            参见元素: <div> <p> <h1>-<h6>
        inline:(行类元素)
            元素在一行内排列，宽度由内容决定
            无法设定宽度，高度和上下边距
            常见元素: <span> <a> <strong>
        inline-block(行内块元素)
            兼具行内和块级特性
            在一行内排列，但可以设置宽度，高度和边距
            适合制作导航菜单等需要水平排列的组件
        none(隐藏元素)
            元素完全从文档流中移除，不占据任何空间
            与visibility:hidden的区别在于后者仍保留空间
        flex(弹性布局)
            一维布局模型，提供更高效的容器内项目对齐和分布
            适合构建响应式布局和复杂组件
            (并且子元素不会继承父元素的flex属性)
        grid(网格布局)
            二维布局系统，可同时控制行和列
            适合构建整体页面布局和复杂网格结构

        后两者已经成为主流布局方式

        实际应用:
            将链接转换为按钮: a {dispaly: inline-block; padding: 10px 20px}
            创建水平导航：nav li { display: inline-block; }
            隐藏移动端元素：.mobile-menu { display: none; }
*/

/*
    CSS 的 position 属性是网页布局中一个非常核心和强大的工具，它用于控制元素在页面上的定位方式
    简单来说，position 属性决定了元素在文档流中的位置，以及它如何与其他元素相互作用
    核心属性值详解:
        static (静态定位):
            默认值‌。元素按照正常的文档流进行排列
            使用 top, right, bottom, left, z-index 属性对它‌无效
        relative (相对定位)
            元素‌相对于其原本在正常文档流中的位置‌进行偏移。
            它原本占据的空间会被保留，不会影响其他元素的位置
            通常与 top, right, bottom, left 一起使用
        absolute (绝对定位)
            元素‌相对于最近一个非 static 定位的祖先元素(可以理解为父元素)‌进行定位
            如果找不到这样的祖先元素，则会相对于 <html> 根元素（即整个页面  就是html这个元素）进行定位
            元素会‌脱离正常的文档流‌，不再占据空间，其他元素会当它不存在一样排列
        fixed (固定定位)
            元素‌相对于浏览器窗口‌进行定位。
            即使页面滚动，它也‌始终固定在屏幕的同一个位置‌。
            同样会脱离正常的文档流。
        sticky (粘性定位)
            是relative 和 fixed 的结合
            元素在跨越特定阈值前是相对定位，之后变为固定定位（例如“固定”在屏幕顶部）
            必须指定 top, right, bottom, left 中的一个值，粘性定位才会生效
*/

/*
    这里说一下，就是用户代理样式，相当于浏览器内置的一套默认样式规则
    在CSS层叠规则中，用户代理样式表的优先级最低，会被开发者定义的作者样式表覆盖
    当多条CSS规则发生冲突时，浏览器会优先采用作者样式表中定义的样式
*/